<!-- 首页 -->
<template>
  <div>
    <Uploading v-show="uploadshow"></Uploading>
    <!-- 导航栏 -->
    <div class="home">
      <div class="s30153804">
        <!-- 上传按钮 -->
        <span class="s-3613cfc6" style="float: left" @click="upshow">
          <img class="s-6a5cf0dc" src="../assets/NavPic/add.jpg" alt="" />
        </span>
        <!-- 更多按钮 -->
        <span class="s-3613cfc6" style="float: right" @click="$router.push('/remind')">
          <img class="s-6a5cf0dc" src="../assets/NavPic/more.jpg" alt="" />
        </span>
        <div class="s2cbb1229">
          <!-- 搜索框 -->
          <div class="s-6d66b116" @click="$router.push('/search')">
            <span class="s-22e5de74">
              <img alt="" src="../assets/NavPic/search.jpg" class="s-34f4f4a1" />
            </span>
            <span class="s-2e06c129">搜索食谱/食材，烘焙/家常菜一应俱全</span>
            <input class="s-362be723" />
          </div>
        </div>
      </div>
      <div class="s7e1f0f36"></div>
    </div>
    <!-- 图标栏 -->
    <div class="s6eb61d30" style="margin: 0px">
      <div class="s3d331c4f">
        <Icon v-for="i in icons" :key="i.id" :icon="i"></Icon>
      </div>
    </div>
    <!-- 推荐课程 -->
    <div>
      <SpecialCol :specialCol="specialCols1[0]"></SpecialCol>
    </div>
    <!-- 下列卡片展示图 -->
    <div>
      <!-- 一个专栏 -->
      <SpecialCol v-for="i in specialCols2" :key="i.id" :specialCol="i"></SpecialCol>
    </div>
    <!-- 底部显示作用 -->
    <div style="height: 40px; background-color: white"></div>
    <!-- 字号展示 -->
    <div style="margin: 0 auto; padding: 10px 20px; background-color: #f5f7f9">
      <a href="https://beian.miit.gov.cn"><div style="font-size: 13px; color: #939393; line-height: 20px">Copyright © hongbeibang.com 粤ICP备14090926号-1</div></a>
      <a
        target="_blank"
        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44060602001356"
        style="display: inline-block; text-decoration: none; height: 20px; line-height: 20px; margin-top: 5px"
      >
        <img src="../assets/psb.jpg" style="float: left" />
        <p style="float: left; font-size: 13px; height: 20px; line-height: 20px; margin: 0px 0px 0px 5px; color: #939393">粤公网安备 44060602001356号</p>
      </a>
    </div>
  </div>
</template>

<script>
  import Icon from '@/components/home/Icon.vue'
  import SpecialCol from '@/components/home/SpecialCol.vue'
  import Uploading from '@/components/home/Uploading.vue'
  export default {
    components: { Icon, SpecialCol, Uploading },
    data() {
      return {
        uploadshow: false,
        icons: [
          { id: 1, img: require('../assets/IconBar/icon1.jpg'), name: '技巧百科', path: '/baike' },
          { id: 2, img: require('../assets/IconBar/icon2.jpg'), name: '视频学堂', path: '/university' },
          { id: 3, img: require('../assets/IconBar/icon3.jpg'), name: '新手教程' },
          { id: 4, img: require('../assets/IconBar/icon4.jpg'), name: '食谱分类' },
        ],
        specialCols1: [{ id: 0, name: '推荐课程' }],
        specialCols2: [
          { id: 1, name: '元气早餐' },
          { id: 2, name: '下午茶时光' },
          { id: 3, name: '网红爆款' },
          { id: 4, name: '私房必做' },
          { id: 5, name: '技法装饰' },
          { id: 6, name: '基础经典' },
          { id: 7, name: '亦爱料理' },
        ],
      }
    },
    methods: {
      // 显示上传页面
      upshow() {
        this.uploadshow = !this.uploadshow
      },
    },
  }
</script>
<style lang="scss" scoped>
  img {
    border: 0;
  }
  a {
    background-color: transparent;
  }
  a {
    text-decoration: none;
  }
  /* 导航栏 */
  .s7e1f0f36 {
    height: 44px;
    overflow: hidden;
    zoom: 1;
  }
  .s30153804 {
    background: #ffffff;
    height: 44px;
    z-index: 6;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 18px;
    margin: 0 auto;
    max-width: 600px;
    box-sizing: border-box;
  }
  .s-3613cfc6 {
    font-size: 0;
    height: 44px;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .s2cbb1229 {
    text-align: left;
    height: 35px;
    margin: 4.5px 45px;
  }
  .s-6a5cf0dc {
    width: 27px;
    height: 27px;
    margin: 9.5px 0;
  }
  .s-6d66b116 {
    height: 100%;
    margin: 0 auto;
    border-radius: 4px;
    zoom: 1;
    background-color: #f5f7f9;
    box-sizing: border-box;
    padding: 0 10px;
    cursor: pointer;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .s-22e5de74 {
    display: inline-block;
    width: 18px;
    margin-right: 10px;
    vertical-align: middle;
    font-size: 0;
  }
  .s-34f4f4a1 {
    width: 100%;
    overflow: hidden;
  }
  .s-2e06c129 {
    color: #999999;
    font-size: 12px;
    vertical-align: middle;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .s-362be723 {
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
  }
  /* 图标栏 */
  .s6eb61d30 {
    margin-top: 10px;
    padding: 0;
    overflow: hidden;
    zoom: 1;
    background-color: #ffffff;
  }
  .s3d331c4f {
    font-size: 0;
    letter-spacing: 0.5px;
    zoom: 1;
    margin: 0;
    background-color: #ffffff;
  }
</style>
